<div class="card">
  <div class="card-header">
    Users
    <a
      class="btn btn-primary"
      style="float: right"
      routerLinkActive="active"
      [routerLink]="['/users/add']"
    >
      Add User
    </a>
  </div>
  <div class="card-body">
    <div class="table-responsive">
      <table class="table" *ngIf="users && users.length">
        <thead>
          <tr>
            <th>User Name</th>
            <th>Email</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let user of users">
            <td>
              <a [routerLink]="['/users', user.id]">
                {{ user.userName }}
              </a>
            </td>
            <td>{{ user.email }}</td>
            <td>
              <a
                class="btn btn-primary"
                routerLinkActive="active"
                [routerLink]="['/users/edit', user.id]"
              >
                Edit
              </a>
              &nbsp;
              <button
                type="button"
                class="btn btn-primary btn-danger"
                (click)="deleteUser(deletetemplate, user)"
              >
                Delete
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
<div *ngIf="errorMessage" class="alert alert-danger">
  Error: {{ errorMessage }}
</div>

<ng-template #deletetemplate>
  <div class="modal-body text-center">
    <p>
      Are you sure you want to delete
      <strong> {{ selectedUser.userName }}</strong>
    </p>
    <button type="button" class="btn btn-primary" (click)="confirmDelete()">
      Yes
    </button>
    <button type="button" class="btn btn-default" (click)="cancelDelete()">
      No
    </button>
  </div>
</ng-template>

<ng-template #auditlogtemplate>
  <div class="modal-body text-center">
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>Date Time</th>
            <th>User Name</th>
            <th>Action</th>
            <th>Name</th>
            <th>Description</th>
            <th>File Name</th>
            <th>File Location</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let auditLog of auditLogs">
            <td>
              {{ auditLog.createdDateTime | date: "dd/MM/yyyy hh:mm:ss" }}
            </td>
            <td>{{ auditLog.userName }}</td>
            <td>{{ auditLog.action }}</td>
            <td [style.color]="auditLog.highLight.name ? 'red' : ''">
              {{ auditLog.data.name }}
            </td>
            <td [style.color]="auditLog.highLight.description ? 'red' : ''">
              {{ auditLog.data.description }}
            </td>
            <td [style.color]="auditLog.highLight.userName ? 'red' : ''">
              {{ auditLog.data.userName }}
            </td>
            <td [style.color]="auditLog.highLight.userLocation ? 'red' : ''">
              {{ auditLog.data.userLocation }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</ng-template>
